<template>
  <div>
    <el-form ref="form" :model="form" label-width="100px">
      <el-form-item label="数据源" required>
        <tree-select
          v-model="form.data.datasourceId"
          :tree-data="datasources"
          :accordion="false"
          :props="params"
          :select-leaf="true"
          @click="datasourceChange"
        />
      </el-form-item>
      <el-form-item label="schema">
        <el-select
          v-model="form.data.schemaName"
          placeholder="请选择"
          style="width: 100%"
          @change="getTables"
        >
          <el-option
            v-for="item in schemas"
            :key="item"
            :label="item"
            :value="item"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="查询模式" required>
        <el-select
          v-model="form.data.queryModel"
          placeholder="请选择"
          style="width: 100%"
          @change="queryModelChange"
        >
          <el-option label="querySql" value="querySql"></el-option>
          <el-option label="table" value="table"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="查询语句" v-if="form.data.queryModel === 'querySql'">
        <el-input
          type="textarea"
          :autosize="{ minRows: 4, maxRows: 8 }"
          v-model="form.data.connection[0].querySql[0]"
        ></el-input>
      </el-form-item>
      <el-form-item label="表" v-if="form.data.queryModel === 'table'">
        <el-select
          v-model="form.data.connection[0].table[0]"
          placeholder="请选择"
          style="width: 100%"
          @change="getFields"
        >
          <el-option
            v-for="item in tables"
            :key="item.tableName"
            :label="item.tableName"
            :value="item.tableName"
          >
            <span style="float: left"
              >{{ item.tableName
              }}{{
                item.tableComment ? "(" + item.tableComment + ")" : ""
              }}</span
            >
            <span style="float: right; color: #8492a6; font-size: 13px">{{
              item.tableType
            }}</span>
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="字段" v-if="form.data.queryModel === 'table'">
        <el-select
          v-model="form.data.column"
          placeholder="请选择"
          multiple
          style="width: 100%"
        >
          <el-option
            v-for="item in fields"
            :key="item.columnName"
            :label="item.columnName"
            :value="item.columnName"
          >
            <span style="float: left"
              >{{ item.columnName
              }}{{
                item.fieldComment ? "(" + item.fieldComment + ")" : ""
              }}</span
            >
            <span
              style="
                float: right;
                color: #8492a6;
                font-size: 13px;
                margin-right: 13px;
              "
              >{{ item.sqlTypeName }}</span
            >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="查询条件" v-if="form.data.queryModel === 'table'">
        <el-input v-model="form.data.where"></el-input>
      </el-form-item>
      <el-form-item label="切分字段">
        <el-input v-model="form.data.splitPk"></el-input>
      </el-form-item>
      <!-- <el-form-item label="分片大小">
        <el-input v-model="form.data.fetchSize"></el-input>
      </el-form-item> -->
    </el-form>
    <div style="text-align: right">
      <el-button type="primary" @click="onSubmit">保存</el-button>
      <el-button @click="onCancal">取消</el-button>
    </div>
  </div>
</template>

<script>
import TreeSelect from "@/components/TreeSelect";
import {
  listDatasourceTree,
  listSchemas,
  listTables,
  listFields,
} from "@/api/metadata/datasource";
import mixin from "@/views/job/design/mixin";
import { objectMerge } from "@/utils";
export default {
  mixins: [mixin],
  components: { TreeSelect },
  data() {
    return {
      form: {
        data: {
          datasourceId: "",
          //读取端需要同步的列 可写 "*"
          column: [],
          schemaName: "",
          queryModel: "table",
          //数据抽取时指定字段进行数据分片
          splitPk: "",
          connection: [
            {
              querySql: [],
              //读取端指定的表
              table: [],
              //读取端连接信息
              jdbcUrl: [],
            },
          ],
          //   fetchSize: 5000,
          //描述筛选条件
          where: "",
        },
      },
      inputVisible: false,
      inputValue: "",
      datasources: [],
      params: {
        value: "id", // ID字段名
        label: "name", // 显示名称
        children: "tchildren", // 子级字段名
        disabled: "disabled",
      },
      schemas: [],
      tables: [],
      fields: [],
    };
  },

  created() {
    this.getDatasourceTree();
  },

  methods: {
    getDatasourceTree() {
      listDatasourceTree().then((res) => {
        this.datasources = res.data;
      });
    },
    datasourceChange(data) {
      this.form.data.datasourceId = data.id;
      this.getSchemas(data.id);
      this.getTables();
    },
    getSchemas(datasourceId) {
      this.schemas = [];
      listSchemas({ datasourceId }).then((res) => {
        this.schemas = res.data;
      });
    },
    getTables() {
      this.tables = [];
      listTables({
        datasourceId: this.form.data.datasourceId,
        schemaName: this.form.data.schemaName,
      }).then((res) => {
        this.tables = res.data;
      });
    },
    getFields(value) {
      this.fields = [];
      listFields({
        datasourceId: this.form.data.datasourceId,
        schemaName: this.form.data.schemaName,
        tableName: this.form.data.connection[0].table[0],
      }).then((res) => {
        this.fields = res.data;
      });
    },
    queryModelChange(value) {
      switch (value) {
        case "table":
          this.form.data.connection[0].table = [];
          this.form.data.column = [];
          this.form.data.where = "";
          break;
        case "querySql":
          this.form.data.connection[0].querySql = [];
          if (!this.form.data.where) {
            this.form.data.where = "";
          }
      }
    },
    onSubmit() {
      this.$refs["form"].validate((valid) => {
        if (valid) {
          this.step.supplementData(this.form.data);
          this.step.setAttrs(this.form.data);
          this.onCancal();
        }
      });
    },
    onCancal() {
      this.$emit("onCloseDialog");
    },
    loadStepAttrs() {
      const list = this.step.getAttrs();
      Object.assign(this.form.data, list);
    },
  },
};
</script>
<style>
.el-tag + .el-tag {
  margin-left: 10px;
}
.button-new-tag {
  margin-left: 10px;
  height: 32px;
  line-height: 30px;
  padding-top: 0;
  padding-bottom: 0;
}
.input-new-tag {
  width: 90px;
  margin-left: 10px;
  vertical-align: bottom;
}
</style>